<div class="layui-fluid" id="comments-table" lay-title="评论管理">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md10">
      <div class="layui-card">
        <div class="layui-card-body nepadmin-table-full">
          <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="hidden">隐藏</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="show">显示</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="batchDelect">删除</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="refresh">刷新页面</div>
          </div>
          <table id="comments-list" lay-filter="comments-list"></table>
        </div>
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-card">
        <div class="layui-card-header">筛选数据</div>
        <div class="layui-card-body">
          <form class="layui-row layui-col-space10 layui-form">
            <div class="layui-col-md12 layui-col-xs4">
              <input type="text" name="title" placeholder="输入关键字-模糊搜索" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md12 layui-col-xs4">
              <select name="status">
                <option value="">显示状态</option>
                <option value="1">公开</option>
                <option value="2">隐藏</option>
              </select>
            </div>
            <div class="layui-col-md12 layui-col-xs12">
              <div class="layui-row layui-col-space10">
                <div class="layui-col-xs6">
                  <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="comments-submit-form">筛选</button>
                </div>
                <div class="layui-col-xs6">
                  <button type="reset" class="layui-btn layui-btn-sm layui-btn-fluid layui-btn-primary">重置</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="TPL-comments-list-status">
    {{#
            var status = {
                1:{title:'公开',color:'blue'},
                2:{title:'隐私',color:'red'},
            }[d.status];
        }}
    <span class="layui-badge layui-bg-{{status.color}}">{{ status.title }}</span>
  </script>
</div>
<script>
  layui.use(['admin', 'table', 'form', 'dropdown', 'jquery', 'laytpl'], function (admin, table, form, dropdown, $,
    laytpl) {

    // 这两个值都要改
    var view = $('#comments-table');
    var tableFilter = 'comments-list';
    // 时间戳要乘以1000，这里要使用毫秒时间戳
    //console.log(layui.util.toDateString(1584408303*1000));
    var cols = [
      [{
          title: '',
          type: 'checkbox',
          fixed: true,
          width: 60
        },
        {
          title: '操作',
          templet: '<p><span"><a onclick="layui.editWeiyu({{ d.id }});"><i class="layui-icon layui-icon-edit-square" style="font-size: 25px;"></i></a></span></p>',
          width: 60
        },
        {
          title: '评论人',
          field: 'nickname',
          width: 200
        },		
        {
          title: '内容',
		  templet: '<p>{{ layui.stripTags(d.content) }}</p>',
          minWidth: 400
        },
        {
          title: '页面标识',
          field: 'page_name',
          width: 100
        },
        {
          title: '状态',
          templet: '#TPL-comments-list-status',
          width: 80
        },		
        {
          field: 'time',
          title: '发布时间',
          templet: '<p><span title="{{d.cdat}}" class="nepadmin-c-gray">{{ layui.util.timeAgo(d.cdat*1000)}}</span></p>',
          align: 'center',
          width: 170,
          sort: true
        }
      ]
    ];
	
	// 编辑
	layui.editWeiyu = function(id){
	   admin.navigate('/edit/weiyu/id='+id);
	}
	
	// 去除html标签
	layui.stripTags = function(str){
        str = str.replace(/<[^>]+>/g,"");//去掉所有的html标
		console.log(str);
		return str;
	}
	
	var operaUrl = layui.api.comments;
	
	var colsApi = operaUrl + 'list';
	
	var colsTable = cols;
	
	// 取缓存页数
    var storage = window.localStorage;
    var tablePage = storage.getItem(tableFilter);
	if(!tablePage){
		tablePage = 1;
    }
	
	// 分类列表
	function getTable(){
      table.render({
        elem: '[lay-filter="' + tableFilter + '"]',
        url: colsApi,
        height: 'full-165',
        cols: colsTable ,
		page: { curr: tablePage }
      });  
	}
	getTable();
    // 提交搜索
    form.on('submit(comments-submit-form)', function (data) {
      var field = data.field;
      table.render({
        elem: '[lay-filter="' + tableFilter + '"]',
        url: colsApi,
        where: field,
        height: 'full-165',
        cols: colsTable 
      });
      return false;
    });
	
    // 初始化表单
    form.render();

    // 操作
    function operation(type, data, msg) {
      if (!msg) {
        msg = '操作';
      }
      admin.post({
        url: operaUrl + type,
        data: data,
        success: function (result) {
          layer.alert(msg + '成功', {
            title: '操作提示',
            time: 0, //不自动关闭
            btn: ['确定'],
            yes: function (index) {
              layer.close(index);
              getTable();
            }
          });
        }
      });
    };

    // 多选操作
    view.find('.table-action').click(function () {
      let type = $(this).attr('data-type');
      if (type == 'refresh') {
        //刷新当前页
        getTable();
        //刷新一个指定页，不用传入页面的参数
        //layui.view.tab.refresh('/index')
        return false;
      }
      let data = table.checkStatus(tableFilter).data;
      let res = {};
	  // 获取主键,即第一个值
	  function getid(data){
	    for(var zid in data){
		  return zid;
        }
	  }
	  let idname = getid(data[0]);
      layui.each(data, function (index, item) {
        // 这里要改成主键id
        res[index] = item[idname];
      });
      let checkedCount = data.length;
      if (checkedCount == 0) {
        layer.msg('请先选择一行数据');
      } else {
        if (type == 'batchDelect') {
          layer.confirm('极度危险操作，删除后无法恢复数据', {
            skin: 'layui-layer-hong',
            title: '提示',
            btn: ['删了', '不删']
          }, function () {
            operation(type, res);
          }, function (index) {
            layer.close(index);
          })
        } else {
          operation(type, res);
        }
      }
    });
  });
</script>